<template>
  <span>auto-fill不会均分剩余的空间</span>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-1">4</div>
    <div class="grid-item grid-item-2">5</div>
    <div class="grid-item grid-item-3">6</div>
  </div>
  <span>auto-fit会均分剩余的空间(只有一行时)</span>
  <div class="grid-2">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-1">4</div>
    <div class="grid-item grid-item-2">5</div>
    <div class="grid-item grid-item-3">6</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  background: #00f;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
}
.grid-2 {
  background: #00f;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
}
</style>
